<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册界面</title>
    <link rel="stylesheet" href="/static/index/css/reset.css" />
    <link rel="stylesheet" href="/static/index/css/common.css" />
    <link rel="stylesheet" href="/static/index/css/font-awesome.min.css" />
</head>
<style>
    .code-btn{
        width: 125px;
        margin-left: 11px;
        border: none;
        font-family: "微软雅黑";
        font-size: 15px;
        color: #666;
        background-color:#e0e9eaf5;
        padding: 10px;
        cursor: pointer;
        transition: all 0.3s;
    }
    .code-btn:hover{
        background-color:#cbd5d6f5;
    }
</style>
<body>
<div class="wrap login_wrap">
    <div class="content">

        <div class="logo"></div>

        <div class="login_box">

            <div class="login_form">
                <div class="login_title">
                    <a href="{:url('index/register/index')}" style="color:#26e0d8">手机注册</a>
                    <span> | </span>
                    <span><a href="{:url('index/register/email')}" style="color:#ff7f50">邮箱注册</a></span>
                </div>
                <form action="{:url('index/register/register')}" method="post" onsubmit="return checkForm()">

                    <div class="form_text_ipt">
                        <input name="name" type="text" placeholder="用户名" maxlength="11" id="name">
                    </div>
                    <div class="ececk_warning tel"><span></span></div>

                    <div class="form_text_ipt">
                        <input name="tel" type="text" placeholder="手机号" maxlength="11" id="tel">
                    </div>
                    <div class="ececk_warning tel"><span></span></div>
                    <div class="form_text_ipt">
                        <input name="pass" type="password" placeholder="密码" maxlength="18" id="pass">
                    </div>
                    <div class="ececk_warning"><span>密码不能为空</span></div>
                    <div class="form_text_ipt">
                        <input name="repass" type="password" placeholder="确认密码" maxlength="18" id="repass">
                    </div>
                    <div class="ececk_warning"><span>密码不能为空</span></div>
                    <div class="form_text_ipt">
                        <input name="" type="text" placeholder="验证码" maxlength="6" style="width:150px">
                        <button type="button" class="code-btn" onclick="getCode()">获取手机验证码</button>
                    </div>
                    <div class="ececk_warning"><span>验证码不能为空</span></div>

                    <div class="form_btn">
                        <button type="submit">注册</button>
                    </div>
                    <div class="form_reg_btn">
                        <span>已有帐号？</span><a href="{:url('index/login/index')}">马上登录</a>
                    </div>
                </form>
                <div class="other_login">
                    <div class="left other_left">
                        <span>其它登录方式</span>
                    </div>
                    <div class="right other_right">
                        <a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101471432&redirect_uri=http://qpei.xin/qqlogin.php&scope=get_user_info"><i class="fa fa-qq fa-2x"></i></a>
                        <a href="#"><i class="fa fa-weixin fa-2x"></i></a>
                        <a href="#"><i class="fa fa-weibo fa-2x"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="/static/index/js/jquery.min.js" ></script>
<script type="text/javascript" src="/static/index/js/common.js" ></script>

<script>

    // 获取验证码
    var time = 59;
    function getCode()
    {
        // ajax请求
        $.ajax({
            type: 'get',
            url: "{:url('index/register/getTelCode')}",
            dataType: 'json',
            success: function(data){
                console.log(data);
            },
            error: function(){
                alert('ajax请求失败!');
            }
        });

        // 计时器方法
        getTime();
    }

    function getTime()
    {
        if (time == 0) {
            // 倒计时结束 清除倒计时
            clearTimeout(timer);
            $('.code-btn').html('获取手机验证码').attr('disabled',false);
            time = 59;
        } else {
            // 继续
            timer = setTimeout('getTime()',1000);
            $('.code-btn').html('已发送 (' + time + 's)').attr('disabled',true);
            time = time-1;
        }
    }

    function checkForm()
    {
        // 验证用户名
        var name = $('#name').val();
        if (name.search(/^[\u4e00-\u9fff\w]{4,8}$/) === -1) {
            alert('用户名格式不正确!');
            return false;
        }

        // 验证手机号
        var tel = $('#tel').val();
        if (tel.match(/^1[345678][0-9]{9}/) === null) {
            alert('手机号格式不正确!');
            return false;
        }

        // 验证密码
        var pass = $('#pass').val();
        if (pass.match(/^[a-zA-Z]\w{5,17}$/) === null) {
            alert('密码格式不正确!');
            return false;
        }
        // 验证二次密码
        var repass = $('#repass').val();
        if (pass !== repass) {
            alert('两次密码不一致');
            return false;
        }
        return true;
    }
</script>
</body>
</html>
